<template>
  <div>
    <button>DashBoard</button>
    <el-input
      v-model="search"
      @change="$refs['tree'].filter(search)"
    ></el-input>
    <el-tree
      :data="treeData.children"
      show-checkbox
      ref="tree"
      :props="propsTemplate"
      node-key="typeId"
      :filter-node-method="searchInTree"
      default-expand-all
      :default-checked-keys="checkedGroup"
      @check="watcher"
    >
    </el-tree>

    <el-select v-model="targetTypeName" ref="elSelect">
      <el-option style="height: auto" :value="targetTypeId">
        <el-tree
          :data="treeData.children"
          ref="tree"
          :props="propsTemplate"
          node-key="typeId"
          :default-checked-keys="checkedGroup"
          @node-click="selectOne"
        >
        </el-tree>
      </el-option>
    </el-select>
    <el-select v-model="targetTypeName">
      <el-option value="zhangsan" label="aaa"></el-option>
      <el-option value="lisi" label="bbb"></el-option>
    </el-select>

    <h3>子组件如何调用父组件的方法</h3>
    <h3>子组件与父组件的的通信</h3>
    <h4>父组件相当代码调用端,子组件相当于代码被调用端</h4>
    <h1>0:this.$parent.method1()直接调用,可能抛出异常中断代码</h1>
    <h1>1:属性绑定通道 :prop=method1 子组件方法内prop()</h1>
    <h1>2:事件/ 子组件发布 queue 父组件订阅模式</h1>
    <h1>3:全局的Vue空组件充当中介名字叫消息总线EventBus</h1>
    <h1>4:使用作用域插槽slot,这种操作非常麻烦</h1>
    <h1>5:使用Vuex,把子组件需要调用的父组件的方法和属性放置在vuex中维护</h1>

    <!-- @click="changeButtonName"-->

    <Son :label="title">

      <el-button  slot-scope="that" @click="totalclick(that)">两个this双亲</el-button>

    </Son>
    <el-button @click="changeTitle">父组件操控子组件内容</el-button>
    <span>{{ fatherName }}</span>
  </div>
</template>

<script>
// import New from './components/New.vue';
import Son from "@/components/Son";
import Convert from "@/utils/TreeFlatConvert";
const root = {
  typeId: 0,
  typeName: "虚拟根节点",
  typeParentId: -1,
  typeLevel: 3,
};
export default {
  name: "DashBoard",
  components: {
    // New,Old,
    Son,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      flatNodes: [],
      treeData: {},
      propsTemplate: {
        children: "children",
        label: "typeName",
        id: "typeId",
      },
      search: null,
      checkedGroup: [3, 7],

      targetTypeId: 0,
      targetTypeName: null,
      title: "lisi",
      fatherName: "老王",
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {

  },
  mounted() {
    this.$notify.success(
      "欢迎登录系统，上次登录时间: " + this.$store.state.userInfo.lastLoginTime
    );
    this.findAll();
    this.$bus.$on("anyQueue",(p)=>{
      this.$message.error("========================="+JSON.stringify(p))
    })

    // this.$bus.$on("adsds",this.showNews)
    // this.$bus.$on("shanxiribao", this.showNews);
    // this.$bus.$on("click",this.)
    // new Convert({flatNodes=})
  },
  destroyed(){
    // this.$bus.$off("shanxiribao");
    this.$bus.$off("anyQueue")
  },
  methods: {
    sampleM() {},
    findAll: function () {
      this.$http({
        method: "get",
        url: "http://localhost:9092/CommodityType/all",
      }).then(
        (res) => {
          this.$message.warning(JSON.stringify(res.data));
          this.flatNodes = JSON.parse(JSON.stringify(res.data));
          this.flatNodes.push(root);
          this.flatNodes.forEach((x) => {
            x.children = [];
          });
          let t = new Convert({
            flatNodes: this.flatNodes,
          });
          this.treeData = t.toTreeDirect("typeId", "typeParentId");
          console.log(this.treeNode);
          // this.flatNodes.push({
          //
          // })
        },
        (error) => {
          console.log(" request error : " + error.response.status);
        }
      );
    },
    searchInTree(inputValue, data) {
      //如果没有输入,则展示所有
      if (!inputValue) return true;
      //如果有明确输入,则展示用户输入的 data代表每一个节点信息为对象
      return data.typeName.includes(inputValue);
    },
    watcher(node, treeChecked) {
      console.log(node);
      console.log(treeChecked.checkedNodes);
    },
    selectOne(data) {
      this.targetTypeId = data.typeId;
      this.targetTypeName = data.typeName;
      if (data.children.length === 0) {
        console.log("target : " + data.typeId);
        this.$refs.elSelect.blur();
      }
    },
    changeTitle() {
      this.title = this.title + "=";
      console.log(this.title);
    },
    changeButtonName(append) {
      if (append) {
        this.fatherName = this.fatherName + "=" + append;
      } else {
        this.fatherName = this.fatherName + "=";
      }
      // this.
    },
    showNews(person, buttons) {
      this.$message.success(JSON.stringify(person));
      this.$notify.success(JSON.stringify(buttons));
    },
    totalclick(that){

      this.showNews("aaa",that.buttons)
      that.update1()
    }
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<style scoped>
/*<style lang='scss' scoped>*/
</style>
